/*
 This file 'common.less' is part of Firebird Integrated Solution 1.0

 Copyright (c) 2020 Lincong

 Contact:  
        Email: lincong1987@gmail.com

        QQ: 159257119
 
 See Usage at http://www.jplatformx.com/firebird

 Create date: 2020-05-29 14:44           
 */

@panel-header: 35px;

.absolute ( @left:0, @top: 0, @width:0, @height:0) {
    position: absolute;
    top:      @top + 0px;
    left:     @left + 0px;
    width:    @width + 0px;
    height:   @height + 0px;
}

.panel (@name, @index:1, @left:0, @top: 0, @width:0, @height:0) {
    
    #@{name}_@{index}_wrapper {
	position: absolute;
	top:      @top + 0px;
	left:     @left + 0px;
	width:    @width + 0px;
	height:   @height + 0px;
    }
    
    #@{name}_@{index}_wrapper when (@dev = true) {
	/* dev mode */
	border: 1px dashed #eee;
    }
    
    #@{name}_@{index}_header {
	position: absolute;
	top:      @top + 0px;
	left:     @left + 0px;
	width:    @width + 0px;
	height:   @panel-header;
    }
    
    #@{name}_@{index} {
	@panel-header-top:    @top + @panel-header;
	@panel-header-height: @height + @panel-header;
	
	position:             absolute;
	top:                  @top + @panel-header;
	left:                 @left + 0px;
	width:                @width + 0px;
	height:               @height - @panel-header;
    }
    
    #@{name}_@{index} when (@dev = true) {
	/* dev mode */
	border: 1px dashed #ff858580;
    }
    
}

@import "reset";

@import "animation";


html, body {
    color:  #fff;
    margin: 0;
}

::-webkit-scrollbar {
    width:  10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: #0A1D5F;
    height:           8px;
    box-shadow:       inset 0 0 5px #324082;
}

::-webkit-scrollbar-thumb {
    background-color: #8a9aea;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    border-radius:    8px;
}


//::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
//    border-radius: 10px;
//    background-color: #F90;
//    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
//}
//::-webkit-scrollbar-track {/*滚动条里面轨道*/
//    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//    /*border-radius: 10px;*/
//    background: #EDEDED;
//}

body {
    overflow:   hidden;
    background: #040D32;
}


.ellipsis () {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}


.ellipsis {
    .ellipsis();
}

.unellipsis () {
    overflow:      visible;
    text-overflow: initial;
    white-space:   normal;
}

.unellipsis {
    .unellipsis();
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.v-align-top {
    vertical-align: top;
}

.v-align-middle {
    vertical-align: middle;
}

.v-align-bottom {
    vertical-align: bottom;
}


.wrapper {
    overflow:         hidden;
    position:         relative;
    background:       data-uri("../img/wrapper-bg.png") no-repeat;
    width:            3840px;
    height:           1080px;
    //margin:     0 auto;
    transform-origin: top left;
    //animation:        breath2 4s ease-in-out infinite;
    
    // transition: width .44s .2s cubic-bezier(0.52, 0.16, 0.24, 1),height .56s cubic-bezier(0.52, 0.16, 0.24, 1);
    transition:       opacity .8s cubic-bezier(0.52, 0.16, 0.24, 1), height .56s cubic-bezier(0.52, 0.16, 0.24, 1), width .56s cubic-bezier(0.52, 0.16, 0.24, 1);
    
    animation:        opacity1 .8s cubic-bezier(0.52, 0.16, 0.24, 1);
    
    &.wh {
	left:        50%;
	margin-left: -1080px / 2;
    }
    
    &.hw {
	transform-origin: top left;
    }
}

.header {
    position:   absolute;
    top:        0px;
    left:       0px;
    background: data-uri("../img/header-bg.png") no-repeat #040D32;
    width:      3840px;
    height:     100px;
    margin:     0 auto;
}

.header-logo {
    position:   absolute;
    top:        18px;
    left:       1542px;
    background: url(../img/header-logo.png) no-repeat -63px center;
    width:      762px;
    height:     63px;
}

.header-menu-date {
    position:  absolute;
    top:       18px;
    left:      26px;
    width:     148px;
    height:    24px;
    font-size: 18px;
    color:     rgba(255, 255, 255, 1);
}

.header-menu-time {
    position:  absolute;
    top:       18px;
    right:     26px;
    font-size: 18px;
    color:     rgba(255, 255, 255, 1);
}

.sub-header {
    position:    absolute;
    top:         103px;
    left:        1418px;
    position:    absolute;
    width:       122px * 2 + 764px;
    height:      32px;
    margin:      0 auto;
    text-align:  center;
    padding-top: 16px;
    z-index:     100;
    
    ul {
	clear:    both;
	position: relative;
	
	li {
	    float: left;
	    
	    .dropdown-btn {
		height: 34px;
		
		a {
		    
		    font-size:   14px;
		    color:       rgba(255, 255, 255, 1);
		    display:     block;
		    background:  url(../img/sub-header-bg.png) no-repeat;
		    width:       122px;
		    height:      32px;
		    margin:      0 2px;
		    padding-top: 4px;
		    
		    &.active {
			color:       #32EBFF;
			font-weight: bold;
		    }
		    
		    &:hover {
			color: #32EBFF;
		    }
		}
		
		em {
		    display:    inline-block;
		    padding:    0 10px;
		    font-size:  18px;
		    color:      #0288D1;
		    font-style: normal;
		}
	    }
	    
	    .dropdown-menu {
		position:         absolute;
		left:             -96px;
		transition:       all .3s;
		transform:        scaleY(0);
		transform-origin: top;
		
		.container {
		    margin-top: 10px;
		    width:      1196px;
		    height:     156px;
		    background: rgba(9, 31, 124, 0.9);
		    border:     1px solid #00dafd;
		    //position:   relative;
		    
		    &::before, &::after {
			position: absolute;
			z-index:  100;
			display:  block;
			content:  "";
			height:   0;
			width:    0;
			border:   10px solid transparent;
		    }
		    
		    &::before {
			top:                 0;
			border-bottom-color: #00dafd;
			border-bottom-width: 5px;
			border-top-width:    5px;
		    }
		    
		    &::after {
			top:                 1px;
			border:              10px solid #0000;
			border-bottom-color: rgba(9, 31, 124, 0.9);
			border-bottom-width: 5px;
			border-top-width:    5px;
			
		    }
		    
		    .dropdown-menu-list {
			
			position: relative;
			clear:    both;
			padding:  5px;
			
			a {
			    width:         108px;
			    height:        32px;
			    border-radius: 2px;
			    display:       block;
			    float:         left;
			    text-align:    center;
			    padding:       6px 21px;
			    color:         #fff;
			    font-size:     14px;
			    margin:        5px;
			    .ellipsis();
			    
			    &.active {
				background: rgba(10, 84, 234, 1);
			    }
			    
			    &:hover {
				background: rgba(10, 84, 234, .8);
			    }
			}
			
			
		    }
		    
		    
		}
		
		
	    }
	    
	    &:hover {
		.dropdown-menu {
		    transform: scaleY(1);
		}
	    }
	    
	    &:nth-of-type(1) {
		.dropdown-menu {
		    .container {
			&::before, &::after {
			    left: 96px + 56px;
			}
		    }
		}
	    }
	    
	    &:nth-of-type(2) {
		.dropdown-menu {
		    .container {
			&::before, &::after {
			    left: 222px + 56px;
			}
		    }
		}
	    }
	    
	    &:nth-of-type(3) {
		.dropdown-menu {
		    .container {
			&::before, &::after {
			    left: 348px + 56px;
			}
		    }
		}
	    }
	    
	    &:nth-of-type(4) {
		.dropdown-menu {
		    .container {
			&::before, &::after {
			    left: 474px + 56px;
			}
		    }
		}
	    }
	    
	    &:nth-of-type(5) {
		.dropdown-menu {
		    .container {
			&::before, &::after {
			    left: 600px + 56px;
			}
		    }
		}
	    }
	    
	    &:nth-of-type(6) {
		.dropdown-menu {
		    .container {
			&::before, &::after {
			    left: 726px + 56px;
			}
		    }
		}
	    }
	    
	    &:nth-of-type(7) {
		.dropdown-menu {
		    .container {
			&::before, &::after {
			    left: 852px + 56px;
			}
		    }
		}
	    }
	    
	    &:nth-of-type(8) {
		.dropdown-menu {
		    .container {
			&::before, &::after {
			    left: 978px + 56px;
			}
		    }
		}
	    }
	    
	}
	
	
    }
    
    
}


.header-menu-left {
    position: absolute;
    top:      38px;
    left:     880px;
    display:  flex;
    
    a {
	font-size:   16px;
	color:       rgba(255, 255, 255, 1);
	display:     block;
	background:  url(../img/header-menu-bg.png) no-repeat;
	width:       180px;
	height:      40px;
	margin-left: -20px;
	text-align:  center;
	padding-top: 8px;
	transition:  all, 0.64s;
	
	
	&.active {
	    font-weight: bold;
	    background:  url(../img/header-menu-bg-active.png) no-repeat;
	}
	
	&:hover {
	    background: url(../img/header-menu-bg-active.png) no-repeat;
	}
    }
    
    
}

.header-menu-right {
    position: absolute;
    top:      38px;
    left:     2460px;
    display:  flex;
    
    a {
	font-size:   16px;
	color:       rgba(255, 255, 255, 1);
	display:     block;
	background:  url(../img/header-menu-bg.png) no-repeat;
	width:       180px;
	height:      40px;
	margin-left: -20px;
	text-align:  center;
	padding-top: 8px;
	transition:  all, 0.64s;
	
	&.active {
	    font-weight: bold;
	    background:  url(../img/header-menu-bg-active.png) no-repeat;
	}
	
	&:hover {
	    background: url(../img/header-menu-bg-active.png) no-repeat;
	}
    }
    
}


.good-table {
    
    
    .good-table-header {
	table {
	    table-layout: fixed;
	    width:        100%;
	    
	    thead {
		tr {
		    th {
			padding:     6px 10px;
			border:      1px solid rgba(0, 218, 253, 0.3);
			background:  rgba(12, 54, 156, 0.9);
			font-size:   16px;
			color:       rgba(255, 255, 255, 1);
			font-weight: normal;
			.ellipsis();
		    }
		}
	    }
	}
    }
    
    .good-table-body {
	table {
	    table-layout: fixed;
	    width:        100%;
	    
	    
	    tbody {
		tr {
		    th {
			padding:     7px 10px;
			border:      1px solid rgba(0, 218, 253, 0.3);
			background:  rgba(12, 54, 156, 0.9);
			font-size:   16px;
			color:       rgba(255, 255, 255, 1);
			font-weight: normal;
			.ellipsis();
		    }
		    
		    td {
			
			background:    transparent;
			border-bottom: 1px solid #0A1D5F;
			padding:       7px 10px;
			font-size:     16px;
			color:         rgba(255, 255, 255, 1);
			.ellipsis();
			
			a {
			    text-decoration: underline;
			}
		    }
		    
		    
		}
	    }
	}
    }
    
    .good-table-footer {
	table {
	    table-layout: fixed;
	    width:        100%;
	    
	    footer {
		tr {
		    td {
			
		    }
		}
	    }
	}
    }
    
    
    &.scroll {
	.good-table-body {
	    overflow: auto;
	}
    }
    
    &.striped {
	.good-table-body {
	    table tbody tr {
		
		// 几
		&:nth-of-type(2n-1) td {
		}
		
		// 偶
		&:nth-of-type(2n) td {
		    background: rgba(9, 28, 117, 1);
		}
	    }
	}
    }
    
    &.bordered {
	.good-table-body {
	    table tbody tr {
	    
		td {
		    border-bottom: 1px solid rgba(0, 218, 253, 0.3);
		    border-right: 1px solid rgba(0, 218, 253, 0.3);
		}
	    }
	}
    }
}


.light {
    position: relative;
    overflow: hidden;
    
    &:after {
	width:      30%;
	height:     200%;
	top:        -50%;
	left:       -30%;
	background: #ffffff;
	opacity:    0;
	content:    '';
	position:   absolute;
	z-index:    -1;
	transition: left, opacity, .6s; // cubic-bezier(0.86, 0, 0.07, 1);
	transform:  rotate(45deg);
	filter:     blur(50px); /*为了模糊更明显，调高模糊度*/
    }
    
    &:hover {
	
	&:after {
	    left:    130%;
	    opacity: 0.5;
	}
    }
}

.blur {
    position: relative;
    overflow: hidden;
    
    &:after {
	width:      30%;
	height:     200%;
	top:        -50%;
	left:       -30%;
	background: #ffffff;
	opacity:    0;
	content:    '';
	position:   absolute;
	z-index:    -1;
	transition: left, opacity, .6s; // cubic-bezier(0.86, 0, 0.07, 1);
	transform:  rotate(45deg);
	filter:     blur(50px); /*为了模糊更明显，调高模糊度*/
    }
    
    &:hover {
	
	&:after {
	    left:    130%;
	    opacity: 0.5;
	}
    }
}


.panel-1 {
    background: linear-gradient(rgba(12, 20, 122, 0), rgba(12, 20, 122, 0.21), rgba(12, 20, 122, 0.35), rgba(12, 20, 122, 0.5));
    //border:     1px red solid;
    //border-image: linear-gradient(rgba(2, 239, 255, 1), rgba(1, 219, 254, 0));
}

.panel-header-1 {
    background: data-uri("../img/panel-header-1-bg.png") no-repeat;
    position:   relative;
    
    .title {
	position:  absolute;
	font-size: 16px;
	color:     rgba(255, 255, 255, 1);
	padding:   7px 0 0 32px;
	display:   block;
    }
    
    .form {
	position: absolute;
	right:    0;
	padding:  7px 0 0 32px;
	display:  block;
    }
}


.card {
    width: 100%;
    
    
    .card-header {
	height: 28px;
	
	.unit {
	    position:    absolute;
	    left:        16px;
	    font-size:   12px;
	    color:       rgba(255, 255, 255, 1);
	    padding-top: 2px;
	}
	
	.switch {
	    position:      absolute;
	    right:         16px;
	    height:        24px;
	    border-radius: 2px;
	    border:        1px solid rgba(50, 197, 255, 1);
	    overflow:      hidden;
	    clear:         both;
	    padding:       1px;
	    
	    a {
		display:       block;
		width:         58px;
		height:        20px;
		border-radius: 1px;
		float:         left;
		text-align:    center;
		font-size:     12px;
		color:         rgba(255, 255, 255, 1);
		padding-top:   1px;
		.transition(0.3s);
		
		&.active {
		    background: rgba(0, 145, 255, 1);
		}
		
		&:hover {
		    background: rgba(0, 145, 255, 0.8);
		}
	    }
	    
	    em {
		display:    block;
		float:      left;
		width:      1px;
		height:     20px;
		background: linear-gradient(180deg, rgba(238, 238, 238, 0) 0%, rgba(50, 197, 255, 1) 54%, rgba(216, 216, 216, 0) 100%);
	    }
	}
    }
    
    .card-body {
    }
    
    .card-footer {
	
    }
}


.tab {
    
    .tab-header {
	clear:    both;
	position: relative;
	
	a {
	    font-size:   12px;
	    color:       #fff;
	    display:     block;
	    background:  url(../img/tab-bg.png) no-repeat;
	    width:       144px;
	    height:      29px;
	    margin-left: -20px;
	    text-align:  center;
	    padding-top: 6px;
	    float:       left;
	    .transition(0.64s);
	    
	    &.active {
		background: url(../img/tab-bg-active.png) no-repeat;
	    }
	    
	    &:hover {
		opacity:    0.8;
		background: url(../img/tab-bg-active.png) no-repeat;
	    }
	}
    }
    
    .tab-content {
	position: relative;
	
	.card, .content {
	    position: absolute;
	    opacity:  0;
	    z-index:  -1;
	    .transition(0.64s);
	    
	    &.active {
		opacity: 1;
		z-index: 1;
	    }
	}
    }
    
    
}


.flop {
    display:  block;
    clear:    both;
    position: relative;
    
    span {
	float:         left;
	display:       block;
	width:         52px;
	height:        68px;
	font-size:     50px;
	font-family:   DINPro-Bold, DINPro;
	font-weight:   bold;
	color:         rgba(255, 255, 255, 1);
	text-align:    center;
	background:    linear-gradient(180deg, rgba(59, 81, 255, 1) 0%, rgba(88, 138, 255, 1) 100%);
	border-radius: 2px;
	margin-right:  8px;
	padding:       10px 0px 0px 0px;
	line-height:   50px;
    }
    
    &:last-child {
	margin-right: 0;
    }
    
    &.pruple {
	span {
	    background: linear-gradient(180deg, rgba(87, 70, 240, 1) 0%, rgba(29, 84, 211, 1) 100%);
	}
    }
    
    &.blue {
	span {
	    background: linear-gradient(180deg, rgba(59, 81, 255, 1) 0%, rgba(88, 138, 255, 1) 100%);
	}
    }
    
    &.orange {
	span {
	    background: linear-gradient(180deg, rgba(207, 122, 18, 1) 0%, rgba(229, 167, 71, 1) 100%);
	}
    }
    
    &.red {
	span {
	    background: linear-gradient(180deg, rgba(173, 45, 45, 1) 0%, rgba(238, 106, 117, 1) 100%);
	}
    }
    
    &.green {
	span {
	    background: linear-gradient(180deg, rgba(70, 153, 97, 1) 0%, rgba(148, 193, 144, 1) 100%);
	}
    }
    
}



.close_dialog_button {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    z-index: 9999999;
    background: data-uri("../img/fb-ui-dialog-close.png") no-repeat center;
    cursor: pointer;
    
    &:hover {
	opacity: 0.8;
    }
}